import React from "react";
import { View, Text } from "@tarojs/components";
import Taro, { FC } from "@tarojs/taro";
import "./index.scss";

type Props = {
    next(): void,
    nextText?: string,
    canNext:boolean,
    back?:Function,
    textColor?:string
}


const MediaNavBar: FC<Props> = (props) => {
    const canNext = props.canNext;
    const textColor = props.textColor || "#fff";
   
    return (<View className="gallery__navbar" style={{ height: 44, position: "relative", zIndex: 10  }}>
        <Text className="ionicons gallery__navbar__closeBtn" onClick={()=>{
            props.back ? props.back() : Taro.navigateBack();
        }} style={{ color:textColor }}
        >{"\uf228"}</Text>
        <Text className="gallery__navbar__filter" style={{
            color: textColor
        }}
        > {props.children} </Text>


        <View className={`gallery__navbar__nextBtn ${canNext ? "gallery__navbar__nextBtn--actived" : ""}`} onClick={props.next} >{props.nextText ? props.nextText : "下一步"}</View>
    </View>);
};

export default MediaNavBar;
